<template>
  <div class="search-number">
    <div class="search-box">
      <p class="tips">手机号码</p>
      <el-input
        v-model="phoneNumber"
        placeholder="请输入号码"
        clearable
        maxlength="20"
        show-word-limit
        @focus="clearErrMsg()"
      ></el-input>
      <p style="color: #f56c6c; margin: 0 20px; width: 100px">
        <span v-if="errMsg" v-text="errMsg"></span>
      </p>
      <el-button type="primary" @click="searchNumber(phoneNumber)">搜索</el-button>
    </div>

    <!-- 历史任务 -->
    <el-table :data="tableData" stripe border height="60" class="table-data" style="width: 100%">
      <el-table-column label="输入号码" prop="Content"></el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
          <span v-text="$options.filters.timeFilter(scope.row.time)"></span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.result === 0">正在执行</span>
          <span v-else>已执行</span>
        </template>
      </el-table-column>
      <el-table-column label="联系人">
        <template slot-scope="scope">
          <span v-if="scope.row.Success === undefined">待查询</span>
          <span v-else-if="scope.row.Success">有</span>
          <span v-else>无</span>
          <el-button
            v-if="scope.row.Success"
            style="margin-left: 10px"
            type="primary"
            size="mini"
            @click="showContactDetail(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 展示好友详情 -->
    <el-dialog title="提示" :visible.sync="detailDialog" width="50%" :before-close="handleClose">
      <el-table :data="contactData" stripe border height="200px" class="table-data" style="width: 100%">
        <el-table-column label="头像" prop="Avatar">
          <template slot-scope="scope">
            <img :src="scope.row.Avatar" alt="头像" />
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="NickName"></el-table-column>
        <el-table-column label="性别" prop="Gender"></el-table-column>
        <el-table-column label="城市" prop="City"></el-table-column>
        <el-table-column label="是否好友">
          <template slot-scope="scope">
            <span v-if="scope.row.IsFriend">已经是好友</span>
            <span v-else>非好友</span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="detailDialog = false">取 消</el-button>
        <el-button type="primary" @click="detailDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'ToolsSearchNumber',
  data() {
    return {
      phoneNumber: '', // 要搜索的号码
      errMsg: '', // 错误信息
      detailDialog: false, // 详情dialog
      contactData: []
    }
  },
  computed: {
    ...mapGetters({
      findContactTaskResult: 'nedb/findContactTaskResult'
    }),
    tableData() {
      return this.findContactTaskResult
    }
  },
  mounted() {
    this.$store.dispatch('nedb/SetFindContactTask')
  },
  methods: {
    // 查询联系人
    searchNumber(val) {
      const reg = new RegExp(/^1[0-9]{10}$/)
      if (reg.test(val)) {
        const currentWechats = this.$store.getters['currentWechats']
        const wechatId = currentWechats['searchNumber']
        if (wechatId) {
          this.$store.dispatch('websocket/FindContactTask', {
            WeChatId: wechatId,
            Content: val
          })
        } else {
          this.$alert('请选中一个微信！', '提示', {
            confirmButtonText: '确定'
            // callback: action => {
            //   this.$message({
            //     type: 'info',
            //     message: `action: ${action}`
            //   });
            // }
          })
        }
      } else {
        this.errMsg = '错误的号码格式'
      }
    },
    // 清除错误信息
    clearErrMsg() {
      this.errMsg = ''
    },
    // 展示联系人信息
    showContactDetail(contact) {
      this.contactData = [contact]
      this.detailDialog = true
    },
    // 关闭弹框之前做点什么
    handleClose(done) {
      this.contactData = []
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-number {
  height: 100%;
  display: flex;
  flex-direction: column;
  .search-box {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    border-bottom: solid #ebeef5 1px;
    .tips {
      width: 110px;
      font-weight: 400px;
      color: $font-color-1;
      margin-right: 10px;
    }
    ::v-deep .el-input {
      width: 200px;
    }
  }

  .table-data {
    flex: 1 1 auto;
  }
}
.contact-item {
  border: solid red 1px;
  display: flex;
}
</style>
